<!--
 * @Descripttion:
 * @version:
 * @Author: cxguo
 * @Date: 2020-05-19 13:15:01
 * @LastEditors: cxguo
 * @LastEditTime: 2020-11-06 08:37:51
-->
<template>
  <div>
    <div class="clearfix font12 paddingTb20">
      <div class="fl">
        <slot />
      </div>
      <div class="fr" />
    </div>
    <vxe-grid
      ref="table"
      class="grid"
      border
      resizable
      highlight-hover-row
      :loading="tableLoading.report"
      :edit-config="{trigger: 'click', mode: 'row'}"
      :columns="columnsData"
      :data="tableData.report"
    />
    <div class="pagination-container">
      <el-pagination
        background
        layout="total, sizes,prev, pager, next,jumper"
        :page-size="pageInfo.rows"
        :page-sizes="[20,30,40]"
        :current-page.sync="pageInfo.page"
        :total="pageInfo.total"
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { oftenuse } from '@/libs/mixins'
import { getMoreButton } from '@/components/Table/oper-btns.js'
import { listPurchaseGroupByBill } from '@/api/report/purchase.js'
import moment from 'moment'

export default {
  name: 'ReportByBill',
  mixins: [oftenuse],
  props: {
    filterData: {
      type: Object,
      default: () => { return {} }
    }
  },
  data() {
    return {
      columnsData: [
        { title: '序号', width: 60, fixed: 'left', align: 'center',
          slots: {
            default: (params) => {
              const { seq } = params
              const value = seq
              return [<span>{value}</span>]
            }
          }
        },
        { title: '操作', width: 80, fixed: 'left',
          slots: {
            default: (params) => {
              const h = this.$createElement
              const moreButtonNode = getMoreButton(h, { props: { type: 'default' },
                on: { click: (row) => { this.btnMore(params) } }})
              const divNode = h('div', {
                attrs: {
                  class: 'table-oper-btns'
                }
              }, [moreButtonNode])
              return [divNode]
            }
          }
        },
        { field: 'time', title: '日期', width: 120,
          slots: {
            default: ({ row }) => {
              const { time } = row
              const value = moment(time).format('YYYY-MM-DD')
              return [<span>{value}</span>]
            }
          }
        },
        { field: 'billCountExcludeReturn', title: '进货笔数', align: 'right', width: 120,
          slots: {
            default: (params) => {
              const { row } = params
              const { billCount, returnBillCount } = row
              const value = billCount - returnBillCount
              return [<span>{value}</span>]
            }
          }
        },
        { field: 'amountPayableExcludeReturn', title: '进货额', align: 'right', width: 120,
          slots: {
            default: (params) => {
              const { row } = params
              const { amountPayable, returnAmountPayable } = row
              const value = this.$amount(amountPayable).subtract(returnAmountPayable).format()
              return [<span>{value}</span>]
            }
          }
        },
        { field: 'billCount', title: '进货开单笔数', align: 'right', width: 120 },
        { field: 'amountPayable', title: '进货开单金额', align: 'right', width: 120 },
        { field: 'returnBillCount', title: '退货笔数', align: 'right', width: 120 },
        { field: 'returnAmountPayable', title: '退货额', align: 'right', width: 120 },
        { field: 'returnAmountOther', title: '退货其他费用', align: 'right', width: 120 }
      ]
    }
  },
  watch: {
    'filterData': {
      handler(data) {
        this.getReprtData()
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    this.initData()
  },
  methods: {
    btnMore(params) {
      const { time } = params.row
      const data = Object.assign({ time }, this.filterData)
      this.$router.push({
        name: 'ReportPurchaseDetailByBill',
        query: data
      })
    },
    initData() {
      // this.getReprtData()
    },
    setPage2first() {
      this.pageInfo.page = 1
    },
    getReprtData() {
      const params = {
        page: this.pageInfo,
        data: Object.assign(this.filterData, this.searchData)
      }
      this.setTableLoading('report', true)
      listPurchaseGroupByBill(params).then(res => {
        this.setTableLoading('report', false)
        if (!res.data.flag) return
        const { records, total } = res.data.data
        this.setTableData('report', records)
        this.pageInfo.total = total
      })
    },
    onSizeChange() {},
    onCurrentChange() {}
  }
}
</script>

<style>

</style>
